<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业人效分析仪表盘</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="./font-awesome/css/all.min.css" rel="stylesheet">
    <script src="./chart.umd.min.js"></script>

    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        info: '#86909C',
                        dark: '#1D2129',
                        light: '#F2F3F5'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .card-hover {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 30px rgba(22, 93, 255, 0.15);
            }
            .chart-container {
                position: relative;
                height: 100%;
                width: 100%;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-dark">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm fixed w-full top-0 z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <i class="fa-solid fa-chart-line text-primary text-2xl"></i>
            <h1 class="text-xl font-bold text-primary">企业人效分析平台</h1>
        </div>

        <div class="hidden md:flex items-center space-x-6">
            <a href="#" class="text-primary font-medium border-b-2 border-primary pb-1">仪表盘</a>
            <a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">人员分析</a>
            <a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">绩效评估</a>
            <a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">培训发展</a>
            <a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">设置</a>
        </div>

        <div class="flex items-center space-x-4">
            <div class="relative">
                <input type="text" placeholder="搜索..." class="pl-8 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200 w-40 md:w-60">
                <i class="fa-solid fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>

            <div class="relative">
                <button class="relative text-gray-600 hover:text-primary transition-colors duration-200">
                    <i class="fa-solid fa-bell text-xl"></i>
                    <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                </button>
            </div>

            <div class="flex items-center space-x-2">
                <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="rounded-full h-8 w-8 object-cover border-2 border-primary/20">
                <span class="hidden md:inline text-sm font-medium">张经理</span>
            </div>

            <button class="md:hidden text-gray-600">
                <i class="fa-solid fa-bars text-xl"></i>
            </button>
        </div>
    </div>
</header>

<!-- 主内容区 -->
<main class="container mx-auto px-4 pt-24 pb-12">
    <!-- 页面标题和筛选器 -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
        <div>
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">企业人效分析</h2>
            <p class="text-gray-500 mt-1">全面了解企业人力资源效率和绩效表现</p>
        </div>

        <div class="flex flex-wrap gap-3 mt-4 md:mt-0">
            <div class="relative">
                <select class="appearance-none bg-white border border-gray-200 rounded-lg pl-4 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200">
                    <option>本季度</option>
                    <option>上季度</option>
                    <option>本年度</option>
                    <option>上年度</option>
                    <option>自定义...</option>
                </select>
                <i class="fa-solid fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
            </div>

            <div class="relative">
                <select class="appearance-none bg-white border border-gray-200 rounded-lg pl-4 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200">
                    <option>全部部门</option>
                    <option>研发部</option>
                    <option>市场部</option>
                    <option>销售部</option>
                    <option>人力资源部</option>
                    <option>财务部</option>
                </select>
                <i class="fa-solid fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
            </div>

            <button class="bg-primary hover:bg-primary/90 text-white rounded-lg px-4 py-2 flex items-center space-x-2 transition-all duration-200 shadow-lg shadow-primary/20">
                <i class="fa-solid fa-download"></i>
                <span>导出报告</span>
            </button>
        </div>
    </div>

    <!-- KPI指标卡片 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <!-- 人均产出 -->
        <div class="bg-white rounded-xl p-6 card-shadow card-hover">
            <div class="flex justify-between items-start mb-4">
                <div>
                    <p class="text-gray-500 text-sm">人均产出</p>
                    <h3 class="text-2xl font-bold mt-1">¥86.5万</h3>
                    <p class="text-success text-sm flex items-center mt-1">
                        <i class="fa-solid fa-arrow-up mr-1"></i>
                        <span>8.2%</span>
                        <span class="text-gray-500 ml-1">vs 上季度</span>
                    </p>
                </div>
                <div class="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
                    <i class="fa-solid fa-line-chart text-primary text-xl"></i>
                </div>
            </div>
            <div class="h-12">
                <canvas id="revenueTrend"></canvas>
            </div>
        </div>

        <!-- 人力成本占比 -->
        <div class="bg-white rounded-xl p-6 card-shadow card-hover">
            <div class="flex justify-between items-start mb-4">
                <div>
                    <p class="text-gray-500 text-sm">人力成本占比</p>
                    <h3 class="text-2xl font-bold mt-1">23.8%</h3>
                    <p class="text-danger text-sm flex items-center mt-1">
                        <i class="fa-solid fa-arrow-down mr-1"></i>
                        <span>2.3%</span>
                        <span class="text-gray-500 ml-1">vs 上季度</span>
                    </p>
                </div>
                <div class="h-12 w-12 rounded-full bg-warning/10 flex items-center justify-center">
                    <i class="fa-solid fa-money-bill-trend-up text-warning text-xl"></i>
                </div>
            </div>
            <div class="h-12">
                <canvas id="costTrend"></canvas>
            </div>
        </div>

        <!-- 员工流失率 -->
        <div class="bg-white rounded-xl p-6 card-shadow card-hover">
            <div class="flex justify-between items-start mb-4">
                <div>
                    <p class="text-gray-500 text-sm">员工流失率</p>
                    <h3 class="text-2xl font-bold mt-1">8.6%</h3>
                    <p class="text-success text-sm flex items-center mt-1">
                        <i class="fa-solid fa-arrow-down mr-1"></i>
                        <span>1.4%</span>
                        <span class="text-gray-500 ml-1">vs 上季度</span>
                    </p>
                </div>
                <div class="h-12 w-12 rounded-full bg-danger/10 flex items-center justify-center">
                    <i class="fa-solid fa-users-slash text-danger text-xl"></i>
                </div>
            </div>
            <div class="h-12">
                <canvas id="turnoverTrend"></canvas>
            </div>
        </div>

        <!-- 培训参与率 -->
        <div class="bg-white rounded-xl p-6 card-shadow card-hover">
            <div class="flex justify-between items-start mb-4">
                <div>
                    <p class="text-gray-500 text-sm">培训参与率</p>
                    <h3 class="text-2xl font-bold mt-1">76.3%</h3>
                    <p class="text-success text-sm flex items-center mt-1">
                        <i class="fa-solid fa-arrow-up mr-1"></i>
                        <span>5.7%</span>
                        <span class="text-gray-500 ml-1">vs 上季度</span>
                    </p>
                </div>
                <div class="h-12 w-12 rounded-full bg-secondary/10 flex items-center justify-center">
                    <i class="fa-solid fa-graduation-cap text-secondary text-xl"></i>
                </div>
            </div>
            <div class="h-12">
                <canvas id="trainingTrend"></canvas>
            </div>
        </div>
    </div>

    <!-- 图表区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <!-- 部门人效对比 -->
        <div class="bg-white rounded-xl p-6 card-shadow lg:col-span-2">
            <div class="flex justify-between items-center mb-6">
                <h3 class="font-bold text-lg">部门人效对比</h3>
                <div class="flex space-x-2">
                    <button class="text-xs bg-primary/10 text-primary px-3 py-1 rounded-full hover:bg-primary/20 transition-colors duration-200">人均产出</button>
                    <button class="text-xs bg-gray-100 text-gray-500 px-3 py-1 rounded-full hover:bg-gray-200 transition-colors duration-200">人力成本</button>
                    <button class="text-xs bg-gray-100 text-gray-500 px-3 py-1 rounded-full hover:bg-gray-200 transition-colors duration-200">效率评分</button>
                </div>
            </div>
            <div class="h-[300px]">
                <canvas id="departmentChart"></canvas>
            </div>
        </div>

        <!-- 人力成本构成 -->
        <div class="bg-white rounded-xl p-6 card-shadow">
            <div class="flex justify-between items-center mb-6">
                <h3 class="font-bold text-lg">人力成本构成</h3>
                <button class="text-gray-400 hover:text-gray-600 transition-colors duration-200">
                    <i class="fa-solid fa-ellipsis-v"></i>
                </button>
            </div>
            <div class="h-[300px] flex items-center justify-center">
                <canvas id="costCompositionChart"></canvas>
            </div>
            <div class="grid grid-cols-2 gap-4 mt-4">
                <div class="flex items-center">
                    <span class="h-3 w-3 rounded-full bg-primary mr-2"></span>
                    <span class="text-sm text-gray-600">工资福利</span>
                </div>
                <div class="flex items-center">
                    <span class="h-3 w-3 rounded-full bg-secondary mr-2"></span>
                    <span class="text-sm text-gray-600">培训费用</span>
                </div>
                <div class="flex items-center">
                    <span class="h-3 w-3 rounded-full bg-warning mr-2"></span>
                    <span class="text-sm text-gray-600">办公成本</span>
                </div>
                <div class="flex items-center">
                    <span class="h-3 w-3 rounded-full bg-danger mr-2"></span>
                    <span class="text-sm text-gray-600">其他费用</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 第二行图表 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <!-- 员工效率分布 -->
        <div class="bg-white rounded-xl p-6 card-shadow">
            <div class="flex justify-between items-center mb-6">
                <h3 class="font-bold text-lg">员工效率分布</h3>
                <div class="relative">
                    <select class="appearance-none text-sm bg-gray-100 border-0 rounded-lg pl-3 pr-8 py-1 focus:outline-none focus:ring-2 focus:ring-primary/30">
                        <option>本季度</option>
                        <option>上季度</option>
                    </select>
                    <i class="fa-solid fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none text-xs"></i>
                </div>
            </div>
            <div class="h-[300px]">
                <canvas id="efficiencyDistributionChart"></canvas>
            </div>
        </div>

        <!-- 人效趋势分析 -->
        <div class="bg-white rounded-xl p-6 card-shadow lg:col-span-2">
            <div class="flex justify-between items-center mb-6">
                <h3 class="font-bold text-lg">人效趋势分析</h3>
                <div class="flex space-x-2">
                    <button class="text-xs bg-primary/10 text-primary px-3 py-1 rounded-full hover:bg-primary/20 transition-colors duration-200">季度</button>
                    <button class="text-xs bg-gray-100 text-gray-500 px-3 py-1 rounded-full hover:bg-gray-200 transition-colors duration-200">年度</button>
                </div>
            </div>
            <div class="h-[300px]">
                <canvas id="efficiencyTrendChart"></canvas>
            </div>
        </div>
    </div>

    <!-- 员工效率排名表格 -->
    <div class="bg-white rounded-xl p-6 card-shadow mb-8">
        <div class="flex justify-between items-center mb-6">
            <h3 class="font-bold text-lg">员工效率排名</h3>
            <div class="flex items-center space-x-3">
                <div class="relative">
                    <select class="appearance-none bg-white border border-gray-200 rounded-lg pl-4 pr-10 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                        <option>全部部门</option>
                        <option>研发部</option>
                        <option>市场部</option>
                        <option>销售部</option>
                    </select>
                    <i class="fa-solid fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none text-xs"></i>
                </div>
                <div class="relative">
                    <input type="text" placeholder="搜索员工..." class="pl-8 pr-4 py-2 rounded-lg border border-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-40">
                    <i class="fa-solid fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"></i>
                </div>
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead>
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">排名</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">员工</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">部门</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">职位</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">效率评分</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">绩效趋势</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                <tr class="hover:bg-gray-50 transition-colors duration-150">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold">1</div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <img class="h-10 w-10 rounded-full object-cover" src="https://picsum.photos/id/1001/40/40" alt="员工头像">
                            <div class="ml-4">
                                <div class="text-sm font-medium text-gray-900">张三</div>
                                <div class="text-xs text-gray-500">zhangsan@example.com</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">研发部</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">高级工程师</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <div class="text-sm font-medium text-gray-900">94.5</div>
                            <div class="ml-2 text-success text-xs">
                                <i class="fa-solid fa-arrow-up"></i> 2.3
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="h-8 w-24">
                            <canvas id="trend1"></canvas>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        <button class="text-primary hover:text-primary/80 transition-colors duration-150">详情</button>
                    </td>
                </tr>
                <tr class="hover:bg-gray-50 transition-colors duration-150">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold">2</div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <img class="h-10 w-10 rounded-full object-cover" src="https://picsum.photos/id/1002/40/40" alt="员工头像">
                            <div class="ml-4">
                                <div class="text-sm font-medium text-gray-900">李四</div>
                                <div class="text-xs text-gray-500">lisi@example.com</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">销售部</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">销售经理</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <div class="text-sm font-medium text-gray-900">92.1</div>
                            <div class="ml-2 text-success text-xs">
                                <i class="fa-solid fa-arrow-up"></i> 5.7
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="h-8 w-24">
                            <canvas id="trend2"></canvas>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        <button class="text-primary hover:text-primary/80 transition-colors duration-150">详情</button>
                    </td>
                </tr>
                <tr class="hover:bg-gray-50 transition-colors duration-150">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold">3</div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <img class="h-10 w-10 rounded-full object-cover" src="https://picsum.photos/id/1003/40/40" alt="员工头像">
                            <div class="ml-4">
                                <div class="text-sm font-medium text-gray-900">王五</div>
                                <div class="text-xs text-gray-500">wangwu@example.com</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">市场部</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">市场总监</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <div class="text-sm font-medium text-gray-900">89.7</div>
                            <div class="ml-2 text-danger text-xs">
                                <i class="fa-solid fa-arrow-down"></i> 1.2
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="h-8 w-24">
                            <canvas id="trend3"></canvas>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        <button class="text-primary hover:text-primary/80 transition-colors duration-150">详情</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <div class="flex justify-between items-center mt-6">
            <div class="text-sm text-gray-500">
                显示 1 至 3 条，共 24 条
            </div>
            <div class="flex space-x-1">
                <button class="h-8 w-8 flex items-center justify-center rounded-lg border border-gray-200 text-gray-400 hover:border-primary hover:text-primary transition-colors duration-150">
                    <i class="fa-solid fa-chevron-left text-xs"></i>
                </button>
                <button class="h-8 w-8 flex items-center justify-center rounded-lg bg-primary text-white">1</button>
                <button class="h-8 w-8 flex items-center justify-center rounded-lg border border-gray-200 hover:border-primary hover:text-primary transition-colors duration-150">2</button>
                <button class="h-8 w-8 flex items-center justify-center rounded-lg border border-gray-200 hover:border-primary hover:text-primary transition-colors duration-150">3</button>
                <button class="h-8 w-8 flex items-center justify-center rounded-lg border border-gray-200 text-gray-400 hover:border-primary hover:text-primary transition-colors duration-150">
                    <i class="fa-solid fa-chevron-right text-xs"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 效率提升建议 -->
    <div class="bg-white rounded-xl p-6 card-shadow">
        <div class="flex justify-between items-center mb-6">
            <h3 class="font-bold text-lg">效率提升建议</h3>
            <button class="text-primary text-sm hover:underline transition-all duration-150">查看全部建议</button>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="border border-gray-100 rounded-xl p-5 hover:border-primary/30 hover:shadow-lg hover:shadow-primary/10 transition-all duration-300">
                <div class="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                    <i class="fa-solid fa-users text-primary"></i>
                </div>
                <h4 class="font-medium text-gray-900 mb-2">优化团队协作流程</h4>
                <p class="text-sm text-gray-600 mb-4">研发部门跨团队协作流程存在效率瓶颈，建议引入敏捷开发方法和协作工具，提升沟通效率。</p>
                <div class="flex justify-between items-center">
                    <span class="text-xs text-gray-500">影响度: 高</span>
                    <button class="text-primary text-sm hover:underline transition-all duration-150">查看详情</button>
                </div>
            </div>

            <div class="border border-gray-100 rounded-xl p-5 hover:border-primary/30 hover:shadow-lg hover:shadow-primary/10 transition-all duration-300">
                <div class="h-10 w-10 rounded-full bg-warning/10 flex items-center justify-center mb-4">
                    <i class="fa-solid fa-graduation-cap text-warning"></i>
                </div>
                <h4 class="font-medium text-gray-900 mb-2">加强员工技能培训</h4>
                <p class="text-sm text-gray-600 mb-4">市场部门数据分析技能普遍不足，建议组织专项培训课程，提升数据驱动决策能力。</p>
                <div class="flex justify-between items-center">
                    <span class="text-xs text-gray-500">影响度: 中</span>
                    <button class="text-primary text-sm hover:underline transition-all duration-150">查看详情</button>
                </div>
            </div>

            <div class="border border-gray-100 rounded-xl p-5 hover:border-primary/30 hover:shadow-lg hover:shadow-primary/10 transition-all duration-300">
                <div class="h-10 w-10 rounded-full bg-success/10 flex items-center justify-center mb-4">
                    <i class="fa-solid fa-calendar-check text-success"></i>
                </div>
                <h4 class="font-medium text-gray-900 mb-2">完善绩效管理体系</h4>
                <p class="text-sm text-gray-600 mb-4">当前绩效评估标准不够明确，建议优化考核指标，增加客观数据占比，减少主观评价因素。</p>
                <div class="flex justify-between items-center">
                    <span class="text-xs text-gray-500">影响度: 高</span>
                    <button class="text-primary text-sm hover:underline transition-all duration-150">查看详情</button>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-gray-200 py-6">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row md:justify-between md:items-center">
            <div class="flex items-center mb-4 md:mb-0">
                <i class="fa-solid fa-chart-line text-primary text-xl mr-2"></i>
                <span class="text-gray-700 font-medium">企业人效分析平台 © 2025</span>
            </div>
            <div class="flex space-x-6">
                <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-200">
                    <i class="fa-brands fa-weixin text-xl"></i>
                </a>
                <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-200">
                    <i class="fa-brands fa-weibo text-xl"></i>
                </a>
                <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-200">
                    <i class="fa-brands fa-linkedin text-xl"></i>
                </a>
            </div>
        </div>
        <div class="mt-4 text-center md:text-left text-sm text-gray-500">
            <p>本系统仅供企业内部使用，请勿对外泄露数据</p>
        </div>
    </div>
</footer>

<!-- JavaScript -->
<script>
    // 导航栏滚动效果
    window.addEventListener('scroll', function() {
        const navbar = document.getElementById('navbar');
        if (window.scrollY > 10) {
            navbar.classList.add('py-2', 'shadow-md');
            navbar.classList.remove('py-3', 'shadow-sm');
        } else {
            navbar.classList.add('py-3', 'shadow-sm');
            navbar.classList.remove('py-2', 'shadow-md');
        }
    });

    // 图表初始化
    document.addEventListener('DOMContentLoaded', function() {
        // 迷你趋势图 - 人均产出
        const revenueCtx = document.getElementById('revenueTrend').getContext('2d');
        new Chart(revenueCtx, {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                datasets: [{
                    data: [75, 78, 82, 79, 83, 86],
                    borderColor: '#165DFF',
                    backgroundColor: 'rgba(22, 93, 255, 0.1)',
                    tension: 0.4,
                    fill: true,
                    pointRadius: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: { x: { display: false }, y: { display: false } },
                elements: { line: { borderWidth: 2 } }
            }
        });

        // 迷你趋势图 - 人力成本占比
        const costCtx = document.getElementById('costTrend').getContext('2d');
        new Chart(costCtx, {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                datasets: [{
                    data: [28, 27, 26, 25, 24, 23],
                    borderColor: '#FF7D00',
                    backgroundColor: 'rgba(255, 125, 0, 0.1)',
                    tension: 0.4,
                    fill: true,
                    pointRadius: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: { x: { display: false }, y: { display: false } },
                elements: { line: { borderWidth: 2 } }
            }
        });

        // 迷你趋势图 - 员工流失率
        const turnoverCtx = document.getElementById('turnoverTrend').getContext('2d');
        new Chart(turnoverCtx, {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                datasets: [{
                    data: [12, 11, 10, 9.5, 9, 8.6],
                    borderColor: '#F53F3F',
                    backgroundColor: 'rgba(245, 63, 63, 0.1)',
                    tension: 0.4,
                    fill: true,
                    pointRadius: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: { x: { display: false }, y: { display: false } },
                elements: { line: { borderWidth: 2 } }
            }
        });

        // 迷你趋势图 - 培训参与率
        const trainingCtx = document.getElementById('trainingTrend').getContext('2d');
        new Chart(trainingCtx, {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                datasets: [{
                    data: [65, 68, 70, 72, 74, 76],
                    borderColor: '#0FC6C2',
                    backgroundColor: 'rgba(15, 198, 194, 0.1)',
                    tension: 0.4,
                    fill: true,
                    pointRadius: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: { x: { display: false }, y: { display: false } },
                elements: { line: { borderWidth: 2 } }
            }
        });

        // 部门人效对比图表
        const departmentCtx = document.getElementById('departmentChart').getContext('2d');
        new Chart(departmentCtx, {
            type: 'bar',
            data: {
                labels: ['研发部', '市场部', '销售部', '人力资源部', '财务部', '客服部'],
                datasets: [{
                    label: '人均产出 (万元)',
                    data: [125.3, 98.7, 156.2, 76.5, 89.4, 65.8],
                    backgroundColor: [
                        'rgba(22, 93, 255, 0.8)',
                        'rgba(22, 93, 255, 0.7)',
                        'rgba(22, 93, 255, 0.9)',
                        'rgba(22, 93, 255, 0.6)',
                        'rgba(22, 93, 255, 0.7)',
                        'rgba(22, 93, 255, 0.5)'
                    ],
                    borderRadius: 6,
                    borderSkipped: false
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.7)',
                        padding: 10,
                        titleFont: { size: 14, weight: 'bold' },
                        bodyFont: { size: 13 },
                        displayColors: false,
                        callbacks: {
                            label: function(context) {
                                return `人均产出: ${context.raw} 万元`;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        grid: { display: false }
                    },
                    y: {
                        beginAtZero: true,
                        grid: { color: 'rgba(0, 0, 0, 0.05)' }
                    }
                },
                animation: {
                    duration: 2000,
                    easing: 'easeOutQuart'
                }
            }
        });

        // 人力成本构成图表
        const costCompositionCtx = document.getElementById('costCompositionChart').getContext('2d');
        new Chart(costCompositionCtx, {
            type: 'doughnut',
            data: {
                labels: ['工资福利', '培训费用', '办公成本', '其他费用'],
                datasets: [{
                    data: [65, 15, 12, 8],
                    backgroundColor: [
                        '#165DFF',
                        '#0FC6C2',
                        '#FF7D00',
                        '#F53F3F'
                    ],
                    borderWidth: 0,
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '70%',
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.7)',
                        padding: 10,
                        titleFont: { size: 14, weight: 'bold' },
                        bodyFont: { size: 13 },
                        callbacks: {
                            label: function(context) {
                                return `${context.label}: ${context.raw}%`;
                            }
                        }
                    }
                },
                animation: {
                    animateRotate: true,
                    animateScale: true,
                    duration: 2000,
                    easing: 'easeOutQuart'
                }
            }
        });

        // 员工效率分布图表
        const efficiencyDistributionCtx = document.getElementById('efficiencyDistributionChart').getContext('2d');
        new Chart(efficiencyDistributionCtx, {
            type: 'radar',
            data: {
                labels: ['工作质量', '工作效率', '团队协作', '创新能力', '学习能力', '执行力'],
                datasets: [{
                    label: '平均水平',
                    data: [75, 70, 80, 65, 72, 78],
                    backgroundColor: 'rgba(22, 93, 255, 0.2)',
                    borderColor: 'rgba(22, 93, 255, 0.6)',
                    pointBackgroundColor: 'rgba(22, 93, 255, 1)',
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgba(22, 93, 255, 1)'
                }, {
                    label: '优秀员工',
                    data: [90, 85, 95, 80, 88, 92],
                    backgroundColor: 'rgba(15, 198, 194, 0.2)',
                    borderColor: 'rgba(15, 198, 194, 0.6)',
                    pointBackgroundColor: 'rgba(15, 198, 194, 1)',
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgba(15, 198, 194, 1)'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    r: {
                        angleLines: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        },
                        grid: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        },
                        pointLabels: {
                            font: {
                                size: 12
                            }
                        },
                        ticks: {
                            backdropColor: 'transparent',
                            display: false
                        }
                    }
                },
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            usePointStyle: true,
                            boxWidth: 6
                        }
                    }
                },
                animation: {
                    duration: 2000,
                    easing: 'easeOutQuart'
                }
            }
        });

        // 人效趋势分析图表
        const efficiencyTrendCtx = document.getElementById('efficiencyTrendChart').getContext('2d');
        new Chart(efficiencyTrendCtx, {
            type: 'line',
            data: {
                labels: ['Q1', 'Q2', 'Q3', 'Q4', 'Q1', 'Q2'],
                datasets: [{
                    label: '人均产出 (万元)',
                    data: [78, 82, 85, 83, 86, 89],
                    borderColor: '#165DFF',
                    backgroundColor: 'rgba(22, 93, 255, 0.1)',
                    tension: 0.4,
                    fill: true,
                    pointBackgroundColor: '#fff',
                    pointBorderColor: '#165DFF',
                    pointBorderWidth: 2,
                    pointRadius: 4,
                    pointHoverRadius: 6
                }, {
                    label: '人力成本占比 (%)',
                    data: [26, 25, 24.5, 24, 23.8, 23.5],
                    borderColor: '#FF7D00',
                    backgroundColor: 'transparent',
                    tension: 0.4,
                    borderDash: [],
                    pointBackgroundColor: '#fff',
                    pointBorderColor: '#FF7D00',
                    pointBorderWidth: 2,
                    pointRadius: 4,
                    pointHoverRadius: 6,
                    yAxisID: 'y1'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                        labels: {
                            usePointStyle: true,
                            boxWidth: 6
                        }
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false
                    }
                },
                scales: {
                    x: {
                        grid: { display: false }
                    },
                    y: {
                        beginAtZero: false,
                        position: 'left',
                        title: {
                            display: true,
                            text: '人均产出 (万元)'
                        },
                        grid: { color: 'rgba(0, 0, 0, 0.05)' }
                    },
                    y1: {
                        beginAtZero: false,
                        position: 'right',
                        title: {
                            display: true,
                            text: '人力成本占比 (%)'
                        },
                        grid: { display: false },
                        ticks: {
                            callback: function(value) {
                                return value + '%';
                            }
                        }
                    }
                },
                animation: {
                    duration: 2000,
                    easing: 'easeOutQuart'
                }
            }
        });

        // 员工绩效趋势小图表
        const trend1Ctx = document.getElementById('trend1').getContext('2d');
        new Chart(trend1Ctx, {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                datasets: [{
                    data: [85, 87, 89, 91, 93, 94],
                    borderColor: '#00B42A',
                    backgroundColor: 'transparent',
                    tension: 0.4,
                    borderWidth: 2,
                    pointRadius: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: { x: { display: false }, y: { display: false } },
                elements: { line: { borderWidth: 2 } }
            }
        });

        const trend2Ctx = document.getElementById('trend2').getContext('2d');
        new Chart(trend2Ctx, {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                datasets: [{
                    data: [80, 82, 85, 87, 90, 92],
                    borderColor: '#00B42A',
                    backgroundColor: 'transparent',
                    tension: 0.4,
                    borderWidth: 2,
                    pointRadius: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: { x: { display: false }, y: { display: false } },
                elements: { line: { borderWidth: 2 } }
            }
        });

        const trend3Ctx = document.getElementById('trend3').getContext('2d');
        new Chart(trend3Ctx, {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                datasets: [{
                    data: [92, 91, 90, 89, 89, 89],
                    borderColor: '#F53F3F',
                    backgroundColor: 'transparent',
                    tension: 0.4,
                    borderWidth: 2,
                    pointRadius: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: { x: { display: false }, y: { display: false } },
                elements: { line: { borderWidth: 2 } }
            }
        });
    });
</script>
</body>
</html>
